<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>Material - iThreeJs</title>
		<style type="text/css">
			html, body {margin:0;padding:0;}
			.container {margin:30px auto;padding:20px;width:800px;border:1px solid #ddd;}
			h3, p {line-height:1.5em;font-size:14px;}
			h3 {text-align:center;}
			img {max-width:100%;}
		</style>
	</head>
	
	<body>
		<div class="container">
			<h3>材质 Material</h3>
			<p>材质是独立于物体顶点信息之外的与渲染效果相关的属性</p>
			<p>通过设置材质可以改变物体的颜色、纹理贴图、光照模式等</p>
			<ul>
				<li>
					<p>基本材质 MeshBasicMaterial(options)</p>
					<p>使用基本材质的物体，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果</p>
					<p>如果没有指定材质的颜色，则颜色是随机的</p>
					<p><img src="pic/material01.jpg" /></p>
				</li>
				<li>
					<p>Lambert材质 MeshLambertMaterial()</p>
					<p>符合Lambert光照模型的材质，主要特点是只考虑漫反射而不考虑镜面反射的效果</p>
					<p>适合大部分物体的漫反射效果，但不适合金属、镜子等需要镜面反射效果的物体</p>
					<p><img src="pic/material02.jpg" /></p>
				</li>
				<li>
					<p>Phong材质 MeshPhongMaterial()</p>
					<p>符合Phong光照模型的材质，漫反射部分和Lambert光照模型相同，另外考虑了镜面反射的效果</p>
					<p>尤其适合对金属、镜面的表现</p>
					<p><img src="pic/material03.jpg" /></p>
				</li>
				<li>
					<p>法向材质 MeshNormalMaterial()</p>
					<p>将材质的颜色设置为其法向量的方向，对于调试非常有用</p>
					<p>在调试时，要知道物体的法向量，使用法向材质就很有效</p>
					<p>照相机在不同位置进行观察时的颜色变化：</p>
					<p><img src="pic/material04.jpg" /></p>
					<p><img src="pic/material05.jpg" /></p>
				</li>
			</ul>
			<p>导入图像作为纹理贴图，而不是使用单一颜色作为材质</p>
			<ul>
				<li>
					<p>单张图应用于长方体</p>
					<p><img src="pic/material06.jpg" /></p>
				</li>
				<li>
					<p>单张图应用于球体</p>
					<p><img src="pic/material07.jpg" /></p>
				</li>
				<li>
					<p>六张图应用于长方体</p>
					<p><img src="pic/material08.jpg" /></p>
				</li>
				<li>
					<p>重复贴图的纹理</p>
					<p><img src="pic/material09.jpg" /></p>
				</li>
			</ul>
		</div>
	</body>
</html>